<template>
  <NuxtLayout name="default">
    <template #mainLeft>
      <div
          class="bg-white flex flex-col h-full w-[330px] rounded-[16px] overflow-hidden text-tx-primary"
      >
        <div class="py-[16px] px-[16px]">
          <div class="flex justify-between items-stretch">
            <el-page-header content="" @back="$router.back()" />
            <!--<ElButton link type="primary" @click="toggleCollapsed">
              全部{{ isCollapseAllOpen ? '收起' : '展开' }}
            </ElButton>-->
          </div>

        </div>
        <div class="flex-1 min-h-0">
          <ElScrollbar ref="categoryScrollbarRef">
            <div class="creation-lists" @wheel="handleWheel">

              <div class="px-[16px]" v-if="modelList.length > 0">
                <div
                    v-for="model in modelList"
                    :key="model.id"
                    class="creation-item"
                    @click="selectModel(model)"
                >

                  <img v-if="model.other_info"
                      class="w-[42px] h-42px rounded-lg"
                      :src="model.other_info.image"
                      alt=""
                  />

                  <div class="ml-[10px]" v-if="model.other_info">
                    <div class="text-base" >
                      {{ model.other_info.name }}
                    </div>
                    <div
                        class="text-xs text-tx-placeholder" style="display:flex;justify-content: space-between"
                    >
                      <div class="line-clamp-1" style="width: 160px;">{{ model.name }}</div>
                      <div class="line-clamp-1" style="text-align: left;">{{ model.create_date }}</div>
                    </div>

                  </div>
                </div>
              </div>
              <div v-else style="text-align: center;">暂无历史会话</div>

            </div>
          </ElScrollbar>
        </div>
      </div>
    </template>
    <div class="h-full sm:flex">

      <div
          class="flex-1 sm:ml-[2px] mt-[15px] sm:mt-0 min-w-0 bg-white"
          style="border-radius: 0 15px 15px 0"
          v-loading="pageInfo.loading"
      >

        <div
            class="h-full flex flex-col items-center justify-center py-[100px]"
        >
          <img
              class="w-[220px] h-[220px]"
              :src="appStore.getWebsiteConfig.pc_logo"
              alt=""
          />
          <!--<div class="text-tx-regular text-sm" style="margin-top: 30px;margin-bottom: 30px">
            快去左侧选择你的会话吧~
          </div>-->
          <div class="xhh" @click="addhh">
            + 开始 AI 创作
          </div>
          <modelSv1></modelSv1>

        </div>

      </div>


    </div>
    <TheCreateRecordPreview
        ref="createRecordPreviewRef"
        :content="previewData.content"
        :title="previewData.title"
        @copy="copyContent"
    />

    <el-dialog v-model="dialogTableVisible" title="" width="80%">
      <modelS></modelS>
    </el-dialog>


    <el-dialog v-model="dialogTableVisibleJL" title="" width="20%" @close="closeImg">
      <img :src="jlSrc" style="width: 385px;height: 630px">
    </el-dialog>


    <TheGuidedPopup ref="guidedPopupRef" />
  </NuxtLayout>
</template>

<script setup lang="ts">
import { throttle } from 'lodash'
import { useElementSize, watchDebounced } from '@vueuse/core'
import { cloneDeep } from 'lodash-es'
import { ElMessageBox, ElScrollbar } from 'element-plus'
import {analysisParaformer, chatSendText, cleanChat, getChatCategoryLists, getchatLog,openExpired} from '~/api/chat'
import { getCreationDetail } from '~/api/create'
import { useAppStore } from '~/stores/app'
import { useUserStore } from '~/stores/user'
import ModelPicker from '~/components/chatting/model-picker.vue'
import { isNewDay } from '~/utils/validate'
import { CHAT_LIMIT_KEY, CHAT_MODEL_KEY } from '~/enums/cacheEnums'
import { Search } from '@element-plus/icons-vue'
import modelSv1 from "~/components/modelv1/indexv1.vue";
import modelS from "~/components/modelv1/index.vue";
import {getConfig} from "~/api/app";
import {openReward} from "~/api/user";
const userStore = useUserStore()
const jlSrc = ref('')
const page_no = ref(1)
const searchKeyword = ref('')
const route = useRoute()
const formDesignerRef = shallowRef()
const isCollapseAllOpen = ref(true)
const dialogTableVisibleJL = ref(false)
const dialogTableVisible = ref(false)
const collapseOpen = ref<any[]>([])
const currentId = ref(Number(route.query.id))
const formData = ref<any>({})
const createRecordPreviewRef = shallowRef()
const currentCreationHistoryRef = shallowRef()
const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>(null)
const appStore = useAppStore()
const router = useRouter()
const modelList = ref([])
const guidedPopupRef = shallowRef()
const categoryScrollbarRef = shallowRef<InstanceType<typeof ElScrollbar>>()
const previewData = reactive({
  title: '',
  content: ''
})

function getCateList(){
  const data = getChatCategoryLists({ page_type: 1,type:2,other_id:-1,page_no:page_no.value,page_size:10 }).then((res) => {
     if(page_no.value == 1){
        modelList.value = res.lists
     }else{
        modelList.value = modelList.value.concat(res.lists)
     }
     console.log(modelList.value)
  })
}


// 聊天模型
const chatModel = ref<string>('')
// 聊天次数(消耗
const chatModelConfig = ref({
  balance: 1,
  member_free: false
})

const {
  data: creationLists,
  pending,
  refresh
} = await useAsyncData(
    () =>
        getCreationLists({
          keyword: searchKeyword.value
        }),
    {
      default() {
        return []
      }
    }
)


let time = null
const handleWheel = throttle(event => {
  console.log('执行了吗')
  page_no.value++
  getCateList()
}, 300) // 节流间隔设置为300毫秒


const { pauseAll } = useAudioPlay()
const defaultForm = [
  {
    name: 'WidgetTextarea',
    title: '多行文本',
    id: 'question',
    props: {
      title: '内容描述',
      placeholder: '',
      rows: 8,
      maxlength: 400,
      autosize: false,
      isRequired: false
    }
  }
]

const getCountMsg = computed(() => {
  if (!chatModelConfig.value.key) return ''
  if (!chatModelConfig.value.member_free) {
    if (chatModelConfig.value.balance) {
      return `消耗 ${chatModelConfig.value.balance} 条对话`
    } else {
      return '免费'
    }
  } else {
    return '会员免费'
  }
})


const addhh = () => {
  dialogTableVisible.value = true
}



const cleanChatLog = async () => {
  await feedback.confirm('确定清空创作记录？')
  await cleanChat({ type: 2, other_id: currentId.value })
  currentCreationHistory.value = []
  resetHistory()
}

/*const { data: modelData, refresh: modelApiRefresh } = await useAsyncData(
    () =>
        getCreationDetail({
          id: currentId.value
        }),
    {
      default() {
        return {}
      },
      transform(data) {
        if (!data.form) {
          data.form = defaultForm
        }
        return data
      }
    }
)*/

const pageInfo = reactive({
  pageNo: 0,
  count: 0,
  pageSize: 15,
  loading: true,
  more: true,
  lists: []
})

async function closeImg(){
  await openReward();
  window.localStorage.removeItem('is_open_reward')
}

const creationHistoryRefresh = async () => {
  if (pageInfo.more || pageInfo.pageNo === 0) {
    pageInfo.pageNo += 1
  } else {
    return
  }
  pageInfo.loading = true
  try {
    const data = await getchatLog({
      other_id: currentId.value,
      page_size: pageInfo.pageSize,
      page_no: pageInfo.pageNo,
      type: 2
    })
    const { page_no, page_size, count } = data
    pageInfo.count = count
    if (page_no * page_size > count) {
      pageInfo.more = false
    }

    const transformData = data.lists.map((item: any) => {
      let title = ''
      if (isArray(item.ask)) {
        const ask = item?.ask[0] || {}
        title = `${ask.title}：${ask.value}`
      } else {
        title = item.ask
      }
      return {
        ...item,
        title
      }
    })
    if (pageInfo.pageNo === 1) {
      pageInfo.lists = []
    }

    pageInfo.lists.push(...transformData)
  } catch (e) {
    console.log('聊天记录错误', e)
  } finally {
    pageInfo.loading = false
  }
}

const resetHistory = () => {
  Object.assign(pageInfo, {
    pageNo: 0,
    count: 0,
    pageSize: 15
  })
  creationHistoryRefresh()
}

const onElScrollbar = ({ scrollTop }) => {
  if (pageInfo.loading) return
  const { clientHeight, scrollHeight } = scrollbarRef.value.wrapRef
  if (scrollTop + clientHeight >= scrollHeight - 100) {
    console.log('触底了')
    creationHistoryRefresh()
  }
}

const handelRecordPreview = (title: string, content: string) => {
  previewData.title = title
  previewData.content = content
  createRecordPreviewRef.value?.open()
}
const selectModel = (model: any) => {
  currentId.value = model.other_id
  router.push({
    path: '/create/produce',
    query: {
      id: model.other_id,
      cate_id:model.id
    }
  })
}
const again = (item: any) => {
  console.log(item)
  formData.value = cloneDeep(item.extra)
}
const { lockFn: rewrite } = useLockFn(async (item: any) => {
  if (item.extra) {
    formData.value = item.extra
    await nextTick()
    handleCreate()
  }
})
watchDebounced(
    searchKeyword,
    (value) => {
      refresh()
    },
    {
      debounce: 500
    }
)
const insertExample = () => {
  modelData.value?.form.forEach((item: any) => {
    if (item.props.placeholder && !item.props.defaultValue) {
      formData.value[item.id] = item.props.placeholder
    }
  })
}

const setFormDataDefault = () => {
  modelData.value?.form.forEach((item: any) => {
    if (item.props.defaultValue) {
      formData.value[item.id] = cloneDeep(item.props.defaultValue)
    } else {
      formData.value[item.id] = undefined
    }
  })
}
const toggleCollapsed = () => {
  if (isCollapseAllOpen.value) {
    isCollapseAllOpen.value = false
    collapseOpen.value = []
  } else {
    collapseOpen.value = creationLists.value.map((item: any) => item.id)
    isCollapseAllOpen.value = true
  }
}

const getInit = () => {

    let is_open_reward = window.localStorage.getItem('is_open_reward')
    if(is_open_reward == 0){
        let pop_img = window.localStorage.getItem('pop_img')
        if(pop_img){
          jlSrc.value = pop_img
          dialogTableVisibleJL.value = true
        }
    }
  pageInfo.loading = false
    if(userStore.userInfo.member_expired == 1 && userStore.userInfo.is_open_expired == 0){
      userStore.userInfo.member_expired = 0
      openExpired({ }).then((res) => {})
      try {
      ElMessageBox.confirm(
          '您的会员已过期，请及时开通会员',
          '过期提示',
          {
            confirmButtonText: '去开通',
            cancelButtonText: '暂不开通',
            type: 'warning',
          }
      )
          .then(() => {
              router.push('/openvip');
          })
          .catch(() => {

          })
      } catch (e){

      }
    }
}



const currentCreationHistory = ref<any[]>([])

const generateTitle = () => {
  if (formData.value.question) {
    return formData.value.question
  }
  const firstForm = modelData.value?.form[0] || {}
  return `${firstForm.props.title}：${formData.value[firstForm.id] || ''}`
}
const isReceiving = ref(false)
let streamReader: ReadableStreamDefaultReader<Uint8Array> | null = null
const chatClose = () => {
  streamReader?.cancel()
  isReceiving.value = false
}
const handleCreate = async () => {
  try {
    await formDesignerRef.value?.validate()
  } catch (error) {
    feedback.msgError('必填项不能为空')
    return
  }
  if (userStore.userInfo.is_chat_limit && isNewDay(true, CHAT_LIMIT_KEY)) {
    try {
      await ElMessageBox.confirm(
          '已超过会员对话上限次数，继续对话将会消耗账户的对话余额',
          '对话上限提示',
          {
            showClose: false,
            confirmButtonText: '继续',
            cancelButtonText: '关闭'
          }
      )
    } catch (e) {
      return
    }
  }
  // 保存聊天模型（用于刷新之后还能记住当前聊天模型
  const model = useCookie(CHAT_MODEL_KEY)
  model.value = chatModel.value

  if (isReceiving.value) return
  scrollbarRef.value?.setScrollTop(0)
  try {
    isReceiving.value = true
    const chatId = Date.now()
    chatSendText(
        {
          model: chatModel.value,
          other_id: currentId.value,
          question: formData.value,
          type: 2
        },
        {
          onstart(reader) {
            streamReader = reader
            if (currentCreationHistory.value.length) {
              currentCreationHistory.value = []
              resetHistory()
            }
            pauseAll()
          },
          onmessage(value) {
            value
                .trim()
                .split('data:')
                .forEach(async (text) => {
                  if (text !== '') {
                    try {
                      const dataJson = JSON.parse(text)

                      const {
                        event,
                        data,
                        code,
                        index,
                        model: modelAlias
                      } = dataJson

                      if (event == 'error' && code === 101) {
                        guidedPopupRef.value?.open()
                      } else if (event == 'error') {
                        feedback.msgError(data)
                      }
                      if (event == 'chat') {
                        let chatIndex =
                            currentCreationHistory.value.findIndex(
                                (item) => item.id === chatId
                            )
                        if (chatIndex === -1) {
                          currentCreationHistory.value.unshift(
                              {
                                loading: true,
                                create_time: timeFormat(
                                    new Date(),
                                    'yyyy-mm-dd hh:MM:ss'
                                ),
                                title: formData.value
                                    .question
                                    ? formData.value
                                        .question
                                    : generateTitle(),
                                model_name: modelAlias,
                                reply: [],
                                extra: cloneDeep(
                                    formData.value
                                ),
                                id: chatId
                              }
                          )
                          chatIndex =
                              currentCreationHistory.value
                                  .length - 1
                        }

                        if (data) {
                          if (
                              !currentCreationHistory.value[
                                  chatIndex
                                  ].reply[index]
                          ) {
                            currentCreationHistory.value[
                                chatIndex
                                ].reply[index] = ''
                          }
                          currentCreationHistory.value[
                              chatIndex
                              ].reply[index] += data
                        }
                      }

                      if (event === 'finish') {
                        const chatIndex =
                            currentCreationHistory.value.findIndex(
                                (item) => item.id === chatId
                            )
                        currentCreationHistory.value[
                            chatIndex
                            ].loading = false
                        currentCreationHistory.value[
                            chatIndex
                            ].reply[index] += data
                        setFormDataDefault()
                        return
                      }
                    } catch (error) {
                      isReceiving.value = false
                    }
                  }
                })
          },
          onclose() {
            userStore.getUser()
            isReceiving.value = false
            // if (pageInfo.lists.length <= pageInfo.pageSize) {
            //     resetHistory()
            // }
          }
        }
    )
    // setFormDataDefault()
  } catch (error) {
    isReceiving.value = false
  }
}
const { copy } = useCopy()
const copyContent = async (content) => {
  await copy(content)
}
watch(
    creationLists,
    (value) => {
      isCollapseAllOpen.value = false
      toggleCollapsed()
      getInit()
    },
    {
      immediate: true
    }
)
const { height } = useElementSize(currentCreationHistoryRef)
watch(height, (value) => {
  if (isReceiving.value) {
    const scrollContainerHeight = scrollbarRef.value?.wrapRef?.offsetHeight
    const scrollTop = value - scrollContainerHeight
    if (scrollTop > 0) {
      scrollbarRef.value?.setScrollTop(scrollTop)
    }
  }
})
watch(currentId, () => {
  chatClose()
  //modelApiRefresh()
  resetHistory()
  currentCreationHistory.value = []
  pageInfo.lists = []
})
const scrollCategory = () => {
  const [activeCategory] = document.getElementsByClassName(
      'creation-item--active'
  )
  if (!activeCategory) return
  const activeCategoryRect = activeCategory.getBoundingClientRect()
  const categoryScrollbarRect =
      categoryScrollbarRef.value?.wrapRef.getBoundingClientRect()
  const scrollTop =
      activeCategoryRect.top -
      (categoryScrollbarRect.height / 2 + categoryScrollbarRect.top)
  categoryScrollbarRef.value.setScrollTop(scrollTop)
}

onMounted(async () => {
  await nextTick()
  scrollCategory()
  creationHistoryRefresh()
  getCateList()
})

definePageMeta({
  layout: false,
  activePath: '/create',
  auth: true
})
</script>

<style lang="scss" scoped>
.creation-lists {
  .el-collapse {
    --el-collapse-border-color: transparent;
    :deep() {
      .el-collapse-item__header {
        padding: 8px 12px;
      }
      .el-collapse-item__content {
        padding: 2px 0;
      }
    }
  }

  .creation-item {
    border: 1px solid rgba(238, 245, 255, 1);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &--active {
      border: 1px solid var(--el-color-primary);
      background-color: var(--el-color-primary-light-9);
    }
  }
}
.create-btn {
  border-radius: 8px;
  background: linear-gradient(
          90deg,
          var(--gradient-1) 0%,
          var(--gradient-2) 100%
  );
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  @apply text-lg text-btn-text;
}
.xhh {
  background:linear-gradient(87.73deg,var(--gradient-1) 0,var(--gradient-2) 100%);
  color: white;
  padding: 15px 40px 15px 40px;
  border-radius: 10px;
  cursor:pointer;
}
</style>
